<template>

  <el-row v-loading="loading">
    <el-col :span="8">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <!-- <el-checkbox  v-model="checkAll">全选</el-checkbox> -->
      <el-checkbox-group v-model="checkedRoles" @change="handleCheckedCitiesChange">

        <el-checkbox style="display:block;padding-left:10px important;" v-for="role in roles" :key="role.id">
          <el-tooltip :content="role.description" placement="right">
            <a href="javascript:;" @click="roleClick(role)">{{role.name}}</a>
          </el-tooltip>
        </el-checkbox>

      </el-checkbox-group>
    </el-col>
    <el-col :span="16">
      <table>

        <thead>
        <th></th>
        <th v-for="ar in areas" :key="ar.key">{{ar.val}}</th>
        </thead>
        <tbody>
        <tr v-for="tp in types" :key="tp.key">
          <td>{{tp.val.match(/[^\s]+$/)[0]}}</td>
          <td v-for="ar in areas" :key="ar.key">
            <el-checkbox v-model="subData[tp.key][ar.key]"/>
          </td>
        </tr>
        </tbody>
      </table>
    </el-col>
  </el-row>


</template>


<script>

  import axios from '@/util/axios'

 const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {
  name: 'VolumeAuth',

  props:{
    data:{
      type:Object,
      default(){
        return {}
      }
    }
  },



  mounted(){

    let types,areas;
    axios.get('/api/v1/sys/dict',{params:{type:'enum',code:'DepType'}}).then(({data}) => {
      types = data;
      axios.get('/api/v1/sys/dict',{params:{type:'enum',code:'AreaType'}}).then(({data}) => {
        areas = data;

        this.types = types;
        this.areas = areas;
        for(let i in types){
          this.$set(this.subData,types[i]['key'],{})
          for(let j in areas){
            this.$set(this.subData[types[i]['key']],areas[j]['key'],false)
          }
        }
      })
    })

    axios.get('/api/v1/sys/dep/arls').then(({data}) => {
      this.roles = data
    })


  },

 data() {
      return {
        loading:false,
        subData:{},
        roles:null,
        checkedRoles:[],
        types:null,
        areas:null,
        checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: false,

      };
    },
    methods: {

      roleClick(role){
        console.log(role);
      },

      handleCheckAllChange(val) {
        console.log(val);
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }


}
</script>


<style scoped>

  table th{
    width:70px;
  }


</style>
